<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--首页css-->

    <link rel="stylesheet" href="../../static/css/login.css" />
    <title>欢迎注册</title>
</head>
<body>
<div class="logo" onclick="toHome()"></div>
<span class="text" onclick="toHome()">慧上云</span>

<div id="btndiv" style="position: absolute;z-index: 103;right:15px;top:30px;width:150px;height:45px;line-height: 45px;text-align: center;cursor: pointer">
    <a href="login.html"><div class="btn" id="btn" style="width: 150px;background: rgba(72, 180, 209,0.4);">登录</div></a>
</div>

<div style="position: absolute;z-index: 100;width:100%;height:100%;background-image: url('../../static/images/loginbg.jpg');background-size: 100%;"></div>
<div style="position: absolute;z-index: 101;width:100%;height:100%;background: #007ACA;filter:alpha(Opacity=40);-moz-opacity:0.4;opacity: 0.4;"></div>
<div style="position: absolute;z-index: 102;width:100%;height:100%;background: none;margin:0 auto;">
    <form method="post" action="/crm/platform/code" target="regFrame" id="regForm">
    <div class="login" id="login">
        <div class="line" id="head" style="color:#fff;font-weight: 700;">
            欢迎注册
        </div>
        <div class="line" style="">
            <input class="input" id="phone" name="phone" value="" autocomplete="off" onkeypress="textAction(this)" type="text" placeholder="手机号" autocomplete="off"/>
        </div>
        <div class="line" style="position: relative;">
            <input class="input" id="code" name="code" value="" autocomplete="off" onkeypress="textAction(this)" type="text" placeholder="验证码" autocomplete="off"/>

            <a href="javascript:sendCodeClick();" send="0" id="sendCode" style="position: absolute;    right: 80px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;    top: 27px;">发送验证码</a>
        </div>
        <div class="line" style="">
            <input class="input" id="password" value="" autocomplete="off" name="password" type="password" placeholder="请输入密码"  autocomplete="off"/>
        </div>
        <div class="line" style="display: none;color: #EE7942;
    font-size: 16px;
    font-weight: 700;" id="errmsg">验证码不正确，请重新输入</div>
        <div class="line" style="">
            <div class="btn" id="reg" onclick="regClick()">注册</div>
        </div>
    </div>
    </form>
</div>

<iframe width="0" height="0" name="regFrame" id="regFrame"></iframe>

<script type="text/javascript">
	var number = 60,intervalId;
	window.onload = function(){
		var windowHeight = document.documentElement.clientHeight;//可视区域高
		var scale = window.screen.width/1280;
		
		setStyles('head',"font-size",scale*26+"px");
		
		var inputWidth = scale*470;
		setStyles(['phone','code','password'],'height',scale*45+'px');
		setStyles(['phone','code','password'],'width',inputWidth+'px');
		setStyles('login','height',scale*390+'px');
		setStyles('login','width',scale*550+'px');
		setStyles('reg','width',scale*470+'px');
		setStyles('reg','height',scale*45+'px');
		setStyles('reg','line-height',scale*45+'px');
		setStyles('reg','font-size',scale*18+'px');
		setStyles(['btndiv','btn'],'height',scale*45+'px');
		setStyles('btn','line-height',scale*45+'px');
		setStyles(['btndiv','btn'],'width',scale*150+'px');
		//setStyles('btn','font-size',scale*18+'px');
		setStyles('sendCode','font-size',scale*18+'px');
		setStyles('errmsg','font-size',scale*16+'px');
		setStylesByClass('line','width',scale*548+'px');
		setStylesByClass('line','padding',scale*15+'px');
		if(scale*1>1){
			setStylesByClass('input','border-bottom-width',2+'px');	
		}
		
		var formHeight = document.getElementById('regForm').offsetHeight;
		setStyles('regForm',"margin-top",(windowHeight-formHeight)/2+"px");
	}

	function setStyles(id,property,value){
		if( typeof(id) == 'object' ){
			for(var i=0 ; i<id.length ; i++){
				setStyleById(id[i],property,value);
			}
		}else{
			setStyleById(id,property,value);
		}
	}
	
	function setStyleById(id,property,value){
		document.getElementById(id).style[property] = value;
	}
	
	function setStylesByClass(id,property,value){
		var eles = document.getElementsByClassName(id);
		for(var i=0 ; i<eles.length ; i++){
			eles[i].style[property] = value;	
		}
	}
	
	function checkPhone(){
	    var phone = document.getElementById('phone').value;
		var flag = (/^1[3456789]\d{9}$/.test(phone));
		if(!flag){
			textActionErrorMessage('手机号输入错误');
		}
	    return flag;
	}

    function textAction(that) {
        document.getElementById('errmsg').style.display = 'none';
        document.getElementById('errmsg').innerHTML = '';
    }
	
	function textActionErrorMessage(message) {
	    document.getElementById('errmsg').style.display = 'block';
	    document.getElementById('errmsg').innerHTML = message;
	}

    function sendCodeClick() {
		if(!checkPhone()){
			return;
		}
		
		
        var sendCode = document.getElementById('sendCode');
        document.getElementById('code').focus();
        sendCode.innerHTML = '验证码已发送（60）';
        intervalId = setInterval("setSendCodeMill()",1000);

        var send = sendCode.getAttribute('send');
        if( send==1 ){
            return;
        }
        sendCode.setAttribute("send","1");

        document.getElementById('regForm').setAttribute("action","/crm/platform/code");
        document.getElementById('regForm').submit();
    }

    function regClick() {
		var phone = document.getElementById('phone').value;
		var code = document.getElementById('code').value;
		var password = document.getElementById('password').value;
		
		if(!checkPhone()){
			textActionErrorMessage('手机号错误');
			return;
		}
		if(code.length!=4){
			textActionErrorMessage('验证码是4位数字');
			return;
		}
		
		if( password.length < 8 ){
			textActionErrorMessage('密码最少8位');
			return;
		}
		textAction();
        document.getElementById('regForm').setAttribute("action","/crm/platform/reg");
        document.getElementById('regForm').submit();
    }

    function reged(resp) {
        if( resp.result == 0 ){
            top.location.href = "/html/index/regnext.html?randomId="+resp.data;
        }else{
            document.getElementById('errmsg').style.display = 'block';
            document.getElementById('errmsg').innerHTML = '验证码不正确，请重新输入';
        }
    }

    function toHome() {
        top.location.href = "../../portal/portal.html";
    }

    function setSendCodeMill(){
        number--;
        if( number < 0 )return;
        var sendCode = document.getElementById('sendCode');
        sendCode.innerHTML = '验证码已发送（'+number+'）';
        if( number <= 0 ){
            clearInterval(intervalId);
            sendCode.setAttribute("send","0");
            sendCode.innerHTML = '发送验证码';
        }
    }
</script>
</body>
</html>

